<template>
  <div class="container">
    <div v-show="showDetail == 1">
      <!-- 页头 -->
      <el-card>
        <el-page-header content="双链生鲜供应链平台:商户列表"> </el-page-header>
      </el-card>
      <!-- 主体部分 -->
      <el-card style="margin: 20px">
        <!-- 头部输入框 -->
        <el-form :inline="true" label-width="80px">
          <el-form-item label="商户状态:">
            <el-select
              placeholder="请选择列表中或者输入搜索"
              style="width: 400px"
              size="small"
              v-model="shopstate"
            >
              <el-option label="已注销" value="已注销"></el-option>
              <el-option label="营业中" value="营业中"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ID:">
            <el-input
              placeholder="请输入"
              style="width: 400px"
              size="small"
              value=""
              v-model="id"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small"
              @click="search">查询</el-button
            >
            <el-button icon="el-icon-refresh-left" size="small" @click="resetData">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="toCreate"
          >新建</el-button
        >
        <el-button
          icon="el-icon-delete"
          size="mini"
          :type="multipleSelection.length == 0 ? '' : 'danger'"
          :disabled="multipleSelection.length == 0"
          @click="moreDelete"
          >批量删除</el-button
        >
        <!-- 提示框 -->
        <div class="sum">
          <span v-show="multipleSelection.length == 0"
            ><span
              >一共<i>{{ total }}</i
              >项</span
            >,请选择要操作的项来执行更多功能</span
          >
          <span v-show="multipleSelection.length !== 0"
            ><span
              >一共<i>{{ total }}</i
              >项</span
            >已经选择<i>{{ multipleSelection.length }}</i
            >项<el-button type="text" class="text" @click="clear"
              >清空</el-button
            >
          </span>
        </div>
        <!-- 表格 -->
        <el-table
          :data="setTime"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          ref="multipleTable"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="120px"
            align="center"
            sortable
          >
          </el-table-column>
          <el-table-column prop="name" label="名称" width="width">
          </el-table-column>
          <el-table-column label="所有人" width="width">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.owner.id + scope.row.owner.displayName }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{
                    scope.row.owner.displayName
                  }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="商户状态" width="width">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>
                  {{
                    scope.row.merchantStatus.id +
                    scope.row.merchantStatus.displayName
                  }}
                </p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{
                    scope.row.merchantStatus.displayName
                  }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="width"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="lastUpdateTime"
            label="最后更新时间"
            width="width"
            sortable
          >
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{ row }">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
              <el-button type="text" @click="toEdit(row)">编辑</el-button>
              <el-button type="text" @click="toDelete(row)" slot="reference"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="float: right; margin: 20px"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="getNewData"
          :current-page="page"
        >
        </el-pagination>
      </el-card>
      <el-card style="margin: 20px">
        <Edate/>
      </el-card>
    </div>
    <Detail v-show="showDetail == 2" @toback="toback" />
    <Create v-show="showDetail == 3" @add="add" @back="back" />
    <Edit v-show="showDetail == 4" @goback="goback" />
    
  </div>
</template>

<script>
import moment from "moment";
// 引入详情
import Detail from "./Detail/index";
// 引入新建
import Create from "./Create/index";
// 引入编辑
import Edit from "./Edit/index";
// 按需引入深拷贝
import cloneDeep from "lodash/cloneDeep";
// 引入Echart
import Edate from './Edate/index'
export default {
  name: "Table",
  data() {
    return {
      // 提示是否选中
      isShow: true,
      //获取到的总体数据
      totalList: [],
      //需要展示的数据
      showList: [],
      // 当前页数
      page: 1,
      // 每页几条数据
      pagesize: 10,
      // 共显示几页1
      total: 30,
      // 主页面和分页切换
      showDetail: 1,
      shopstate: "",
      // 输入的id
      id: "",
      // 所有需要的数据
      needAllDate: [],
      // 点击所有的选择框
      multipleSelection: [],
    };
  },
  // 注册组件
  components: {
    Detail,
    Create,
    Edit,
    Edate
  },
  methods: {
    // 获取商品列表信息
    async getShop() {
      let result = await this.$API.shop.getShop();
      //  let result = await this.$API.shop.getShop();
      // 创建一个空的数组
      // console.log(result);
      let all = [];
      // 遍历数组中的每一项
      result.shop.forEach((item) => {
        item.merchantList.forEach((value) => {
          all.push(value);
        });
      });
      // 所有的数据
      // console.log(all,'-------->');
      let index = 0;
      let add = all.map((item) => {
        this.$set(item, "only", index++);
        return item;
      });
      // console.log(add,'------->');
      // 有only和所有需要的数据
      this.needAllDate = add;
      // 当前显示的就只显示10条数据
      this.showList = add.slice(0, 10);
      // 总页数
      this.total = add.length;
      // console.log(add.length);
    },
    // 点击不同的页数发请求
    async getNewData(val) {
      let result = await this.$API.shop.getShop();
      if (result.code == 200) {
        let needData = this.needAllDate.slice((val - 1) * 10, val * 10);
        this.showList = needData;
        this.page = val;
      }
    },
    // 去详情页
    toDetail(row) {
      let arr = [];
      arr.push(row);
      this.$bus.$emit("showDetail", arr);
      this.showDetail = 2;
    },
    // 去新建
    toCreate() {
      this.showDetail = 3;
    },
    //去编辑
    toEdit(row) {
      let info = cloneDeep(row);
      this.$bus.$emit("edit", info);
      this.showDetail = 4;
    },
    // 编辑页更新完毕给对应的值进行修改
    update({ itemname, itemid }) {
      this.showList = this.showList.map((item) => {
        if (item.id == itemid) {
          item.name = itemname;
        }
        return item;
      });
      this.showDetail = 1;
    },
    // 删除
    toDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const { page } = this;
          // 显示的列表将索引匹配到的删除
          this.showList = this.showList.filter(
            (item) => item.only !== row.only
          );
          //总体的列表总体需要的匹配到的删除
          this.needAllDate = this.needAllDate.filter(
            (item) => item.only !== row.only
          );
          // 控制显示的从全部中只截取10条
          this.showList = this.needAllDate.slice((page - 1) * 10, page * 10);
          // 根据总体的数组的长度更新分页的总页数
          this.total = this.needAllDate.length;
          if (page - 1 == this.total / 10 && this.showList.length == 0) {
            this.showList = this.needAllDate.slice(
              (page - 2) * 10,
              (page - 1) * 10
            );
            this.page = this.total / 10;
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 增加
    add(val) {
      // 整理数据
      let displayName = val.name; //名称
      let owner = val.owner; //所有人
      let state = val.state; //营业状态
      let time = Date.now(); //获取当前的时间戳
      let createTime = moment(time).format("YYYY-MM-DD hh:mm"); //转化格式
      let id = Math.round(Math.random() * 199); //id设置为随机数
      let addItem = {
        id: `M079${id}`,
        createTime: createTime,
        lastUpdateTime: createTime,
        name: displayName,
        merchantStatus: {
          displayName: state,
          id: `M079${id}`,
        },
        owner: {
          displayName: owner,
          id: `M079${id}`,
        },
      };
      // 将整理好的数据添加到当前展示的数组中
      this.setTime.unshift(addItem);
      // 返回主页面
      this.showDetail = 1;
    },
    // 新增组件点击箭头和放弃返回主页面
    back() {
      this.showDetail = 1;
    },
    // 详情组件点击箭头返回主页面
    toback() {
      this.showDetail = 1;
    },
    // 从编辑也点箭头返回主页面
    goback() {
      this.showDetail = 1;
    },
    // 点击单选框
    handleSelectionChange(val) {
      // 选中的每一个对象都存到数组中
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    // 批量删除
    moreDelete() {
      this.$confirm("此操作将永久删除该数据 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let { multipleSelection, page } = this;
          //总体的列表总体需要的匹配到的删除
          multipleSelection.forEach((item) => {
            this.needAllDate = this.needAllDate.filter(
              (allitem) => item.only !== allitem.only
            );
          });
          // // 控制显示的从全部中只截取10条
          this.showList = this.needAllDate.slice((page - 1) * 10, page * 10);
          // // 根据总体的数组的长度更新分页的总页数
          this.total = this.needAllDate.length;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击清空
    clear() {
      this.$refs.multipleTable.clearSelection();
    },
    // 点击搜索
    search(){
      let {id,needAllDate,shopstate}=this
      if(id){
         needAllDate = needAllDate.filter(item=>item.id == id)
      }
      if(shopstate){
         needAllDate= needAllDate.filter(item=>item.merchantStatus.displayName == shopstate)
      }
      if(id&&shopstate){
          needAllDate = needAllDate.filter(item=>item.id == id && item.merchantStatus.displayName == shopstate)
      }
      this.showList=needAllDate
    },
    // 点击重置
    resetData(){
      let {page}=this
      this.id=''
      this.shopstate=''
      this.search()
      this.showList=this.needAllDate.slice((page - 1) * 10, page * 10);
    }
  },
  mounted() {
    //获取数据
    this.getShop();
    //接收编辑后的新值
    this.$bus.$on("update", this.update);
  },
  computed: {
    // 转化为正确时间格式的新数组
    setTime() {
      return this.showList.map((item) => {
        item.createTime = moment(item.createTime).format("YYYY-MM-DD hh:mm");
        item.lastUpdateTime = moment(item.lastUpdateTime).format(
          "YYYY-MM-DD hh:mm"
        );
        return item;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  .sum {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding-left: 20px;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 10px;
    i {
      color: #1890ff;
      font-style: normal;
    }
    .text {
      font-size: 16px;
      text-align: center;
      margin-left: 20px;
    }
  }
}
</style>
